<template>
  <el-button type="primary" @click="exportToExcel">数据导出</el-button>
  <div>
    <div class="search-bar">
      <el-select v-model="selectedType" placeholder="请选择主类型" @change="fetchActivitiesByTypeOrTypes">
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="selectedSubType" v-if="selectedType" placeholder="请选择副类型" @change="fetchActivitiesByTypeOrTypes">
        <el-option
          v-for="item in subTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <el-table :data="activities" style="width: 100%" @sort-change="fetchActivitiesByTypeOrTypes">
      <el-table-column prop="aname" label="活动名称" />
      <el-table-column prop="did" label="所属部门id" />
      <el-table-column prop="sid" label="学号" />
      <el-table-column prop="sname" label="姓名" />
      <el-table-column prop="type" label="主类型" />
      <el-table-column prop="types" label="副类型" />
      <el-table-column prop="date" label="签到时间" />
      <el-table-column prop="url" label="签到证明" width="180">
        <template #default="{ row }">
          <img :src="row.url" alt="签到证明图片" P v-if="row.url" style="max-width: 100%; height: auto;">
        </template>
      </el-table-column>
    
    
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import axiosInstance from '@/plugins/Axios.js';
import { ElMessage } from 'element-plus';

const store = useStore();

// 响应式引用
const activities = ref([]);
const selectedType = ref('');
const selectedSubType = ref('');
const typeOptions = ref([
  { value: '创造能力', label: '创造能力' },
  { value: '文体能力', label: '文体能力' },
  { value: '社会实践能力', label: '社会实践能力' },
]);
const subTypeOptions = ref([]);

// 根据主类型更新副类型选择器的选项
const updateSubTypes = () => {
  if (selectedType.value === '创造能力') {
    subTypeOptions.value = [
      { value: '学科竞赛', label: '学科竞赛' },
      { value: '参加校科研项目', label: '参加校科研项目' },
      { value: '报刊投稿录用', label: '报刊投稿录用' },
      { value: '其他项', label: '其他项' },
    ];
  } else if (selectedType.value === '文体能力') {
    subTypeOptions.value = [
      { value: '体育竞赛', label: '体育竞赛' },
      { value: '文艺竞赛', label: '文艺竞赛' },
      { value: '参加校内外各种艺术比赛', label: '参加校内外各种艺术比赛' },
      { value: '其它项', label: '其它项' },
    ];
  } else if (selectedType.value === '社会实践能力') {
    subTypeOptions.value = [
      { value: '公益事业', label: '公益事业' },
      { value: '参加三下乡', label: '参加三下乡' },
      { value: '参加校系组织的讲座', label: '参加校系组织的讲座' },
      { value: '网络平台参与比赛', label: '网络平台参与比赛' },
      { value: '其他项', label: '其他项' },
    ];
  } else {
    subTypeOptions.value = [];
    selectedSubType.value = ''; // 清空副类型选择
  }
};

// 获取活动信息并根据类型筛选
const fetchActivitiesByTypeOrTypes = async () => {
  try {
    const sid = store.getters.CurrentUser.sid;
    if (!sid) {
      console.warn('当前用户未登录或登录信息尚未准备好');
      return;
    }

    updateSubTypes(); // 更新副类型列表

    let type = selectedType.value;
    let subType = selectedSubType.value;

    if (type) { // 如果主类型被选中
      if (subType) { // 如果副类型也被选中
        const data = await axiosInstance.fetchActivityByTypes(sid, type, subType);
        activities.value = data;
      } else { // 只有主类型被选中
        const data = await axiosInstance.fetchActivityByType(sid, type);
        activities.value = data;
      }
    } else { // 没有选择任何类型
      const data = await axiosInstance.fetchActivityById(sid);
      activities.value = data;
    }
  } catch (error) {
    console.error('获取活动信息时出错:', error);
    ElMessage.error('获取活动信息失败');
  }
};

// 数据导出Excel 
const exportToExcel = async () => {
      try {
        const sid = store.getters.CurrentUser.sid;
        if (!sid) {
          console.warn('当前用户未登录或登录信息尚未准备好');
          return;
        }
    
        // 构造请求体
        const data = activities.value.map(activity => [
          activity.aname,
          activity.did,
          activity.sid,
          activity.sname,
          activity.type,
          activity.types,
          activity.date,
          activity.url,
        ]);
    
        // 发送 POST 请求
        const response = await axiosInstance.post('/student/exportExcel', data);
        if (response.status === 200) {
          ElMessage.success('此页数据已导出为 Excel 文件，请前往D盘查看！');
        } else {
          ElMessage.error('数据导出失败了哦，请重试！');
        }
      } catch (error) {
        console.error('导出数据时出错:', error);
        ElMessage.error('导出数据失败');
      }
    };

onMounted(() => {
  fetchActivitiesByTypeOrTypes(); // 页面加载时获取所有数据
});
</script>

<style scoped>
.search-bar {
  margin-bottom: 20px;
  width: 250px;
}

.dialog-footer {
  text-align: right;
}

.header-text {
  background-clip: padding-box;
  display: flex;
  flex-direction: column;
  float: left;
  background: -webkit-linear-gradient(315deg, #3f9dfd 15%, #f36b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: bolder;
}
</style>